<template>
    <div class="uploader"
        @dragenter="onDragEnter"
        @dragleave="onDragLeave"
        @dragover.prevent
        @drop="onDrop"
        :class="{ dragging:isDragging }"
    >   
        <div class="image-control" v-show="images.length">
            <label for="file">Select a file</label>
            <button @click="upload">Upload</button>
        </div>

        <div v-show="!images.length">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="uploader-choice">
                Drop file here &emsp;
                <span>OR</span>
                <div class="file-input">
                    <label for="file">Select a file</label>
                    <input type="file" id="file" @change="onInputChange" multiple />
                </div>
            </div> 
        </div>

        <div class="image_preview" v-show="images.length">
            <div class="img-wrapper" v-for="(image,index) in images" :key="index">
                <img :src="image" :alt="`Image Uploader ${index}`"/>
                <div class="detail">
                    <span class="name" v-text="files[index].name"></span>
                    <span class="size" v-text="files[index].size"></span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import bus from '../../bus.js';
export default {
    name:"imgUploader",
    data(){
        return {
            isDragging:false,
            dragCounter:0,
            images:[],   // v-for循环中使用。转化为图像，在浏览器显示。
            files:[]     // 上传的图片信息保存在这里。上传到服务器。
        }
    },
    methods:{
        // 将图片拖放进入到上传位置
        onDragEnter(e){
            e.preventDefault();
            this.dragCounter++;
            this.isDragging = true;
        },
        // 将图片拖放离开上传位置
        onDragLeave(e){
            e.preventDefault();
            this.dragCounter--;
            if(this.dragCounter <= 0){
                this.isDragging = false;
            }
        },

        // 点击按钮上传图片
        onInputChange(e){
            const files = e.target.files;
            Array.from(files).forEach(file => this.addImage(file));
        },
        //  拖拽图片放下时，遍历所有拖拽的图片，执行添加图片方法
        onDrop(e){
            e.preventDefault();                    // 阻止默认事件执行
            e.stopPropagation();                   // 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
            this.isDragging = false;
            const files = e.dataTransfer.files;    // 拖拽上传获取上传图片信息
            Array.from(files).forEach(file => this.addImage(file));   // 将获取的上传的拖拽图片信息依次遍历添加图片信息
        },
        // 添加图片信息
        addImage(file){
            if(!file.type.match('image.*')){
                console.log(`${file.name} is not an image`);
                return;
            }
            this.files.push(file);
            //将图片文件转化为图像，显示在浏览器中。上传的图片转化成base64进行在网络上流通
            const img = new Image(),reader = new FileReader();
            reader.onload = (e) => this.images.push(e.target.result);
            reader.readAsDataURL(file);
        },
        // 上传图片
        upload(){
            // 向ImgList图片列表传递上传的图片
            bus.emit("toImgList",this.images);
            console.log('images',this.images);
            this.images = [];
            this.files = [];
            // const formData = new FormData();
            // this.files.forEach(file => {
            //     formData.append('image[]',file,file.name);
            // });
            // axios.post('/imgs',formData).then(response => {
            //     console.log("Images have been uploaded successfully");
            //     this.images = [];
            //     this.files = [];
            // })
        }
    }
}
</script>

<style>
/* 整个上传图片的容器 */
.uploader {
    width:70%;
    margin:20px auto;
    background: #2196f3;
    color:#fff;
    padding:10px 15px;
    /* text-align: center; */
    border-radius: 10px;
    border:2px dashed #fff;
    font-size:18px;
    position: relative;
}
/* 拖拽时的样式 */
.dragging{
    background: #fff;
    color:#2196f3;
}
.el-upload-dragger{
    /* background: #2196f3; */
    /* color:#fff; */
}
/* element-plus图标的大小 */
.el-icon{
    font-size:75px;
}
/* 拖拽或点击上传的文字格式 */
.uploader-choice{
    width:400px;
    height:30px;
    display:grid;
    grid-template-columns: 2fr 1fr 3fr;
    padding:10px;
    margin:5px auto;
}
/* 点击按钮选择图片 */
.file-input{
    width:150px;
    margin:auto;
    height:100%;
    position: relative;
}
/* 点击按钮选择图片的标签和输入框 */
.file-input label, .file-input input {
    cursor: pointer;
    background: #fff;
    color: #2196f3;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    width: 100%;
}
.file-input input{
    opacity: 0;
    z-index: -2;
}
/* 图片上传前的浏览 */
.image_preview{
    display:flex;
    flex-wrap: wrap;
    margin-top:5px;
    
}
/* 图片上传前的图片和图片文字 */
.img-wrapper{
    width:140px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:16px;
    padding:10px;
    height:140px;
    /* overflow: hidden; */
    background: #2196f3;
}
/* 图片上传前的图片 */
.img-wrapper img{
    max-height: 105px;
    width:100%;
}
/* 图片上传前的图片文字 */
.detail{
    font-size:10px;
    display:flex;
    flex-direction: column;
    align-items: self-start;
    padding:3px 3px;
    background: #fff;
    color:black;
    overflow: hidden;
}
/* 图片上传前的按钮：选择其他图片和上传 */
.image-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:30px;
    background: #fff;
    /* padding: 10px; */
    padding-bottom: 4px;
    text-align: right;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor:pointer;
}
/* 图片上传前的按钮样式 */
.image-control button, .image-control label {
    background: #2196f3;
    color:#fff;
    border:2px solid blue;
    border-radius: 3px;
    font-size:16px;
    margin:6px 8px;
}
.image-control label {
    padding: 2px 4px;
}
</style>